<template>
    <div class="large-left2 large-panel">
        <div class="top-title">
            <div class="title-one">
                <img class="title-one-ico" src="@/assets/large/panel-title-ico.png" />
                客流量排名
            </div>
            <div class="title-one" style=" margin-left: 30px;">
                <img class="title-one-ico" src="@/assets/large/panel-title-ico.png" />
                接诊数量
            </div>
        </div>
        <div class="num-box">
            <div class="num-list" v-for="(item,idx) in numList" :key="'num_'+idx">
                <img class="num-list-bg" src="@/assets/large/left2-numbg.png" v-if="item!==','" />
                <div class="num-list-word">{{item}}</div>
            </div>
        </div>
        <div style="position:relative">
            <div id="largeChartleft2"></div>
        </div>
    </div>
</template>

<script lang="ts">
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    @Watch("pageData")
    pageDataChange() {
        this.setPageData();
    }
    numList: string[] = [];
    dataList: any[] = [];
    chart: any = null;
    dataCount = 0;
    maxData = 1;
    interval = 1;
    mounted() {
        this.setPageData()
    }
    setPageData() {
        if (!this.pageData || !this.pageData.patientFlowRanking) return;
        this.dataList = this.pageData.patientFlowRanking.map((item) => ({
            name: item.institutionalType,
            val: item.patientCount,
        }));
        let total = 0;
        let max = 0;
        this.dataList.forEach((item) => {
            total += item.val;
            const val = Number(item.val);
            if (val > max) max = val;
        });
        this.dataCount = total;
        const maxData = Math.ceil(max + max * 0.1);
        this.interval = Math.ceil(maxData / 5);
        this.maxData = this.interval * 5;

        echartLoad(() => {
            this.setChart();
        });

        this.numList = this.getNumList(this.pageData.totalPatients || 0);
    }
    beforeDestroy() {
        this.timer && clearInterval(this.timer);
    }
    getNumList(num) {
        const str = Number(num).toLocaleString();
        return str.split("");
    }
    childVisible = false;
    openChild() {
        this.childVisible = true;
    }
    currentIndex = -1;
    timer: any = null;
    chartAnimation() {
        const options = this.chart.getOption();
        options.series = this.getSeries(true);
        this.chart.setOption(options);
        setTimeout(() => {
            options.series = this.getSeries(false);
            this.chart.setOption(options);
        }, 50);
    }
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
            // 启动定时器（每 20 秒切换一次）
            this.timer = setInterval(this.chartAnimation, 20000);

            // // 鼠标悬停时暂停自动切换
            this.chart.on("mouseover", () => clearInterval(this.timer));
            this.chart.on("mouseout", () => {
                this.timer = setInterval(this.chartAnimation,20000);
            });
        }
    }

    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries(false);
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("largeChartleft2");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            grid: {
                top: 40,
                bottom: 30,
                left: 60,
                right: 20,
            },

            tooltip: {
                trigger: "axis",
            },
            xAxis: [
                {
                    type: "category",
                    data: this.dataList.map((item) => item.name),
                    axisLabel: {
                        color: "#fff",
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                    axisLine: {
                        show: true, // 默认显示轴线，可省略
                        lineStyle: {
                            color: "rgba(58, 211, 193,0.9)", // 轴线颜色
                            width: 1, // 轴线宽度
                        },
                    },
                },
            ],
            yAxis: [
                {
                    show: true,
                    type: "value",
                    name: "客流量",
                    nameTextStyle: {
                        color: "rgba(255, 255, 255, 0.7)",
                        padding: [0, 0, 0, -50],
                    },
                    min: 0,
                    max: this.maxData,
                    interval: this.interval,
                    axisLine: {
                        show: false, // 默认显示轴线，可省略
                        lineStyle: {
                            color: "rgba(255,255,255,0.3)", // 轴线颜色
                            width: 1, // 轴线宽度
                        },
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: "rgba(255, 255, 255, 0.7)",
                    },
                    splitLine: {
                        lineStyle: { color: "rgba(58, 211, 193, 0.3)", type: "dashed" },
                    },
                },
            ],
            series: this.getSeries(false),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries(type) {
        return [
            {
                name: "客流量",
                type: "bar",
                barWidth: "15",
                color: "rgba(58, 211, 193, 1)",
                itemStyle: {
                    barBorderRadius: [10, 10, 0, 0],
                },
                label: {
                    // 数据标签配置
                    show: true, // 显示标签
                    position: "top", // 标签位置，可以是'top'/'inside'/'bottom'等
                    formatter: "{c}", // 显示数据值，{c}表示数据值
                    color: "#fff", // 标签颜色
                    fontSize: 12, // 标签字体大小
                },
                data: type ? [] : this.dataList.map((item) => item.val),
            },
        ];
    }
}
</script>
<style lang="scss">
.large-left2 {
    padding-top: 20px;
    position: relative;
    #largeChartleft2 {
        width: 100%;
        height: 22vh;
    }
    .top-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #3ad3c1;
        font-weight: bold;
        padding-left: 20px;
        margin-bottom: 30px;
    }
    .title-one-ico {
        width: 30px;
    }
    .num-box {
        font-weight: bold;
        font-size: 18px;
        color: #fff;
        position: absolute;
        top: 50px;
        left: 210px;
    }
    .num-list {
        display: inline-block;
        position: relative;
        height: 30px;
        min-width: 10px;
        margin-right: 1px;
    }
    .num-list-bg {
        height: 30px;

        display: block;
    }
    .num-list-word {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2px;
    }
}
</style>
